<template>
	<view class="header">
		<uni-nav-bar fixed>
			<view class="title">
				<text class="little" @click="handelTitle(1)" :class="titleFlag == 1 ? 'active' : ''">广场</text>
				<text class="little" @click="handelTitle(2)" :class="titleFlag == 2 ? 'active' : ''">动态</text>
			</view>
			<view slot="left"><image src="../../static/image/mine/l.png" mode=""></image></view>
			<view slot="right"><image src="../../static/image/mine/r.png" mode=""></image></view>
		</uni-nav-bar>
		<view class="card">
			<view class="title">云村热评墙></view>
			<swiper class="date-bar-swiper" :autoplay="true" :duration="500" :circular="true" :vertical="true">
				<swiper-item v-for="(item, index) in msgList" :key="index">{{ item }}</swiper-item>
			</swiper>
			<view class="date">
				<view>{{ curDate[1] }}.</view>
				<view class="date-bar-num">{{ curDate[2] }}</view>
			</view>
		</view>
		<view class="page-content"></view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			titleFlag: 1,
			curDate: String(new Date()).split(' '),
			msgList: ['他是我见过最年少有为的人', '因为一个人而失眠，这真的好吗', '花开花落，没有悲愁怎么是少年？']
		};
	},
	created() {
		// console.log(this.curDate);
	},
	methods: {
		handelTitle(num) {
			this.titleFlag = num;
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 44px;
	.title {
		width: 100%;
		font-size: 18px;
		// text-align: center;
		.little {
			margin: 0px 80rpx;
			padding: 8px 0px;
		}
		.active {
			border-bottom: 2px solid #ef5656;
		}
	}
	image {
		width: 40px;
		height: 30px;
		margin-top: 10px;
	}
	.card {
		position: relative;
		width: 90%;
		height: 100px;
		margin: 10px auto;
		background: #4b4b4b;
		border-radius: 7px;
		font-size: 16px;
		font-weight: 700;
		.title {
			width: 110px;
			position: absolute;
			left: 20px;
			top: 20px;
			color: #ffffff;
		}
		.date-bar-swiper {
			width: 100%;
			height: 30px;
			position: absolute;
			left: 20px;
			bottom: 10px;
			font-size: 14px;
			color: #c1c3c2;
		}
		.date {
			float: right;
			width: 50px;
			color: #ffffff;
			margin-top: 20px;
		}
	}
}
</style>
